<!--
 Access control component for fine-grained access control.
-->
<script lang="ts">
  import type { PropType } from "vue"
  import { defineComponent } from "vue"
  import { RoleEnum } from "/@/enums/roleEnum"
  import { usePermission } from "/@/hooks/web/usePermission"
  import { getSlot } from "/@/utils/helper/tsxHelper"

  export default defineComponent({
    name: "Authority",
    props: {
      /**
       * Specified role is open
       * When the permission mode is the role mode, the value value can pass the role value.
       * When the permission mode is background, the value value can pass the code permission value
       * @default ''
       */
      value: {
        type: [Number, Array, String] as PropType<RoleEnum | RoleEnum[] | string | string[]>,
        default: "",
      },
    },
    setup(props, { slots }) {
      const { hasPermission } = usePermission()

      /**
       * Render role button
       */
      function renderAuth() {
        const { value } = props
        if (!value) {
          return getSlot(slots)
        }
        return hasPermission(value) ? getSlot(slots) : null
      }

      return () => {
        // Role-based value control
        return renderAuth()
      }
    },
  })
</script>
